<script setup>
import { appStockListQuery } from "@/services/cashier";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
import {
  chartBusiness,
  chartCategory,
  chartProduct,
  chartShop,
  chartPayType,
} from "@/services/index";
const showShop = ref(false);
const chartSelectIndex = ref(0);
onLoad((e) => {});
onReady(() => {
  // 微信小程序需要用此写法
  // datetimePickerRef.value.setFormatter(formatter);
});
onShow(() => {
  getDate(1);
  // getChartBusiness();

  // getappScTransferCountUnsigned();
});

// 定义 close 方法
const close = (e) => {
  // console.log('close', e)
};

// 定义 change 方法
const change = (e) => {
  // console.log('change', e)
};

function Time(e) {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const show = ref(false);
const value1 = ref(Date.now());

// const formatter = (type, value) => {
//   if (type === "year") {
//     return `${value}年`;
//   }
//   if (type === "month") {
//     return `${value}月`;
//   }
//   if (type === "day") {
//     return `${value}日`;
//   }
//   return value;
// };

const gopagesfun = (e) => {
  uni.navigateTo({
    url: "/pages/cashier/statistics/index",
  });
};
const saveFun = () => {};

const toNav = (url) => {
  uni.navigateTo({
    url: url,
  });
};

const totallObj = ref({});

const getappScTransferCountUnsigned = async () => {
  let res = await appScTransferCountUnsigned({});
  totallObj.value = res.data;
};

const chartSelect = (index) => {
  console.log(index);
  if (chartSelectIndex.value != index) {
    chartSelectIndex.value = index;
    pageIndex.value = 1;
    getDate(1);
  }
};

const upper = (e) => {
  console.log(e);
};
const lower = (e) => {
  console.log(e);
};
const scroll = (e) => {
  console.log(e);
};
const open = (e) => {};

//数据
const businessDet = ref({});
const chartCategoryList = ref([]);
const chartFoodsList = ref([]);
const chartShopList = ref([]);
const chartPayTypeList = ref([]);
const pageIndex = ref(1);
const pageSize = ref(30);

const getChartBusiness = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem.value.type,
      };
    }
  }

  data.sortField = "salesTotal";
  data.sortOrder = "desc";

  const res = await chartBusiness(data);
  businessDet.value = res.data;
};

const getChartCategory = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem2.value.type,
      };
    }
  }
  data.sortField = "salesTotal";
  data.sortOrder = "desc";
  const res = await chartCategory(data);
  chartCategoryList.value = res.data.data;
};

const getChartShop = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
    }
  }
  data.sortField = "salesTotal";
  data.sortOrder = "desc";
  const res = await chartShop(data);
  chartShopList.value = res.data.data;
};

const getChartProduct = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: 1,
      pageSize: 10,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: 1,
        pageSize: 10,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: 1,
        pageSize: 10,
      };
    }
  }
  data.sortField = "salesTotal";
  data.sortOrder = "desc";
  const res = await chartProduct(data);
  chartFoodsList.value = res.data.data;
};

const getChartPayType = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: 1,
      pageSize: 10,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: 1,
        pageSize: 10,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: 1,
        pageSize: 10,
      };
    }
  }
  data.sortField = sortField.value;
  data.sortOrder = sortOrder.value;

  const res = await chartPayType(data);
  chartPayTypeList.value = res.data.data;
};

const goSetting = () => {
  uni.navigateTo({
    url: "/pages/mysetting/up/index",
  });
};

const goTo = (url) => {
  if (loading.value) return;
  console.log(url);
  if (url === 1) {
    return;
  }
  if (!url) {
    return showToast("暂未开放，敬请期待");
  }
  uni.navigateTo({ url });
};

const selectShow = ref(false);
const selectItem = ref({ type: 2, text: "昨天" });
const selectItem2 = ref({});
const datePick = ref([
  {
    type: 1,
    text: "今天",
  },
  {
    type: 2,
    text: "昨天",
  },
  {
    type: 3,
    text: "近7天",
  },
  {
    type: 4,
    text: "本周",
  },
  {
    type: 5,
    text: "本月",
  },
  {
    type: 6,
    text: "上周",
  },
  {
    type: 7,
    text: "上月",
  },
]);
const selectItemFun = (item, index) => {
  if (index == 1) {
    selectItem2.value = {};
    selectItem.value = item;
    selectShow.value = false;
    getDate();
  } else {
    if (item.type == 4) {
      showtime.value = true;
    } else {
      selectItem.value = {};
      selectItem2.value = item;
      selectShow.value = false;
      getDate();
    }
  }
};

const getDate = (index) => {
  if (chartSelectIndex.value == 0) {
    getChartProduct(index);
  }

  if (chartSelectIndex.value == 1) {
    getChartCategory(index);
  }

  if (chartSelectIndex.value == 2) {
    getChartShop(index);
  }
};

const showtime = ref(false);
const timevalue = ref(Date.now());
const datetimePickerRef = ref(null);
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
const confirmDate = (e) => {
  let dateobj = new Date(e.value);
  console.log(dateobj.getFullYear(), dateobj.getMonth() + 1, dateobj.getDate());
  timevalue.value =
    dateobj.getFullYear() +
    "-" +
    (dateobj.getMonth() + 1 < 10
      ? "0" + (dateobj.getMonth() + 1)
      : dateobj.getMonth() + 1) +
    "-" +
    (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());
  selectItem.value = {};
  selectItem2.value = { type: 4, text: timevalue.value };
  showtime.value = false;
  selectShow.value = false;

  getDate();
};

const caseIndex = ref(10);

const toMorePage = () => {
  caseIndex.value = caseIndex.value + 10;
};

const sortField = ref("");
const sortOrder = ref("");
const sortFun = (str) => {
  console.log(str, sortField.value, sortOrder.value);
  if (sortField.value == str) {
    console.log("111", sortOrder.value);
    sortField.value = str;
    // sortOrder.value=sortOrder.value=='desc'?'asc':sortOrder.value=='desc'?'':'desc'
    if (sortOrder.value == "desc") {
      sortOrder.value = "asc";
    } else if (sortOrder.value == "asc") {
      sortOrder.value = "";
    } else if (sortOrder.value == "") {
      sortOrder.value = "desc";
    }

    console.log(2, sortOrder.value);
  } else {
    sortField.value = str;
    sortOrder.value = "desc";
    console.log(1, sortOrder.value);
  }
  getDate(1);
};
//无网状态
const connected = () => {
  getDate(1);
};
</script>

<template>
  <view class="bg">
    <up-navbar
      bgColor="rgba(255, 255, 255, 0)"
      @rightClick="rightClick"
      :autoBack="true"
      :safeAreaInsetTop="true"
      :fixed="true"
      :placeholder="true"
      :leftText="'返回'"
    >
      <template #right>
        <view class="center-right" @click="selectShow = true">
          <text>{{
            selectItem.text
              ? selectItem.text
              : selectItem2.text
              ? selectItem2.text
              : ""
          }}</text>
          <up-icon
            name="calendar"
            color="#333333"
            size="34rpx"
          ></up-icon> </view
      ></template>
      <template #center>
        <text
          class="text-white"
          style="
            font-weight: 500;
            font-size: 34rpx;
            color: #000000;
            line-height: 48rpx;
            text-align: center;
          "
          >销售排行</text
        ></template
      >
    </up-navbar>
    <view class="content">
      <view class="content-title"> 商品销售榜 </view>
      <view class="content-des">榜单每日0点更新</view>
    </view>
    <view class="num-list">
      <view class="chart-title-left">
        <view class="chart-title-item">
          <text
            @click="chartSelect(0)"
            :class="chartSelectIndex == 0 ? 'chart-title-item-active' : ''"
            >商品销售总额</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 0 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
        <view class="chart-title-item">
          <text
            @click="chartSelect(1)"
            :class="chartSelectIndex == 1 ? 'chart-title-item-active' : ''"
            >按商品分类</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 1 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
        <view class="chart-title-item">
          <text
            @click="chartSelect(2)"
            :class="chartSelectIndex == 2 ? 'chart-title-item-active' : ''"
            >按门店</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 2 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
      </view>
      <view class="jl-content">
        <view id="demo1" class="scroll-view-item_H">
          <view v-if="chartSelectIndex == 0">
            <view class="tb tb-head">
              <view class="one">商品名称</view>
              <view class="two">销售额</view>
              <view class="three">订单数</view>
            </view>
          </view>
          <view v-if="chartSelectIndex == 1">
            <view class="tb tb-head">
              <view class="one">商品分类</view>
              <view class="two">销售额</view>
              <view class="three">订单数</view>
            </view>
          </view>
          <view v-if="chartSelectIndex == 2">
            <view class="tb tb-head">
              <view class="one">门店</view>
              <view class="two">销售额</view>
              <view class="three">订单数</view>
            </view>
          </view>

          <view v-if="chartSelectIndex == 0">
            <view
              class="tb"
              v-for="(item, index) in chartFoodsList"
              :key="index"
            >
              <view class="one">
                <view class="one-pm">{{ index + 1 }}</view>
                <view class="one-pm-to">
                  <text>{{ item.productName }}</text></view
                >
              </view>
              <view class="two">{{ item.salesAmount }}</view>
              <view class="three">{{ item.orderNum }}</view>
            </view>
          </view>
          <view v-if="chartSelectIndex == 1">
            <view
              class="tb"
              v-for="(item, index) in chartCategoryList"
              :key="index"
            >
              <view class="one">
                <view class="one-pm">{{ index + 1 }}</view>
                <view class="one-pm-to">
                  <text>{{ item.categoryName }}</text></view
                >
              </view>
              <view class="two">{{ item.salesAmount }}</view>
              <view class="three">{{ item.orderNum }}</view>
            </view>
          </view>
          <view v-if="chartSelectIndex == 2">
            <view
              class="tb"
              v-for="(item, index) in chartShopList"
              :key="index"
            >
              <view class="one">
                <view class="one-pm">{{ index + 1 }}</view>
                <view class="one-pm-to">
                  <text>{{ item.shopName }}</text></view
                >
              </view>
              <view class="two">{{ item.salesTotal }}</view>
              <view class="three">{{ item.orderCount }}</view>
            </view>
          </view>

          <no-Data
            style="padding-bottom: 200rpx; margin-top: 10rpx"
            text="暂无数据"
            v-if="
              (chartFoodsList.length <= 0 && chartSelectIndex == 0) ||
              (chartCategoryList.length <= 0 && chartSelectIndex == 1) ||
              (chartShopList.length <= 0 && chartSelectIndex == 2)
            "
          ></no-Data>
          <!-- <view class="tb">
            <view class="one">门店</view>
            <view class="two">销售额</view>
            <view class="three">订单数</view>
          </view> -->
          <!-- <view class="top">2131233</view> -->
        </view>
      </view>
    </view>
  </view>

  <!-- <up-datetime-picker
    class="top-center"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker> -->
  <up-popup
    :closeable="true"
    :show="selectShow"
    @close="selectShow = false"
    :safeAreaInsetBottom="true"
    @open="open"
    round="15"
  >
    <view class="popup-content">
      <view class="popup-content-title" @click="showtime = false">取消</view>
      <view class="popup-content-selTop">快捷选择</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem.type == item.type ? 'kj-select-item-seleect' : ''"
          v-for="(item, index) in datePick"
          :key="index"
          @click="selectItemFun(item, 1)"
        >
          {{ item.text }}
        </view>
      </view>
      <view class="popup-content-selTop">自定义</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem2.type == 1 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 1, text: '今日' }, 2)"
        >
          今日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 2 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 2, text: '昨日' }, 2)"
          >昨日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 3 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 3, text: '近7日' }, 2)"
        >
          近7日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 4 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 4, text: '自定义' }, 2)"
        >
          自定义
        </view>
      </view>
      <view class="bt-text"> </view>
    </view>
  </up-popup>

  <up-datetime-picker
    class="top-center"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
